<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>别踩白块儿</title>
    <link rel="Shortcut Icon" href="ico.ico" type="image/x-icon" />
    <link rel="stylesheet" href="game.css">
</head>

<body>
    <header>
        <h1>别踩白块儿</h1>
        <div id="time">00.00秒</div>
        <div id="score">0</div>
    </header>
    <div id="container">
        <table id="tb">
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>按J开始</td>
                <td>按K开始</td>
                <td>按L开始</td>
            </tr>
        </table>
    </div>
</body>
<script>
    var mis = 0;
    var sec = 0;
    var min = 0;
    var score = 0;

    var bool = true;

    var sco = document.getElementById('score');
    var time = document.getElementById('time');
    var tb0 = document.getElementById('tb')[0];

    var tr = document.getElementsByTagName('tr');

    tr[0].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
    tr[1].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
    tr[2].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
    tr[3].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';


    function addhang() {
        tb.insertRow(0);
        for (var i = 0; i < 3; i++) {
            tr[0].insertCell();
        }
        tr[0].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
    }

    function del() {
        tr[4].remove();
    }

    document.documentElement.addEventListener('keydown', function (event) {
        if (bool == true && (event.key == 'j' || event.key == 'k' || event.key == 'l')) {
            int = setInterval(times, 10);
            bool = false;
        }
        switch (event.key) {
            case 'j':
                if (tr[3].children[0].style.background == 'black') {
                    addhang()
                    del();
                    scores();
                } else {
                    over();
                    begin();
                }
                break;
            case 'k':
                if (tr[3].children[1].style.background == 'black') {
                    addhang()
                    del();
                    scores();
                } else {
                    over();
                    begin();
                }
                break;
            case 'l':
                if (tr[3].children[2].style.background == 'black') {
                    addhang()
                    del();
                    scores();
                } else {
                    over();
                    begin();
                }
                break;
        }
    });

    function scores() {
        score += 10;
        sco.innerHTML = score;
    }

    function over() {
        alert('游戏结束    用时：' + time.innerHTML + '   您的分数：' + score);
        clearInterval(int);
        mis = 0;
        sec = 0;
        min = 0;
        score = 0;
        sco.innerHTML = score;
        bool = true;
    }

    function begin() {
        time.innerHTML = (min < 10 ? "0" + min : min) + ":" + (sec < 10 ? "0" + sec : sec) + ":" + (mis < 10 ? "0" +
            mis : mis);
    }

    function times() {
        mis += 1;
        if (mis > 99) {
            mis = 0;
            sec += 1;
        }
        if (sec > 59) {
            sec = 0;
            min += 1;
        }
        if (min > 23) {
            min = 0;
        }
        begin();
    }
</script>

</html>